/**
 * 根据当前数据渲染视图列表
 * @param {*} currentData 当前数据
 * @param {*} paddingSet padding对象集合
 * @param {*} list 列表容器节点
 */
export function render(currentData, paddingSet, list) {
  const oFragment = document.createDocumentFragment();
  currentData.forEach((item) => {
    const oItem = document.createElement('div');
    oItem.className = 'list-item';
    oItem.innerText = item;
    oFragment.appendChild(oItem);
  });

  //<div class="list-item">1</div> ...
  list.appendChild(oFragment);

  //更新视图padding样式
  //<div class="list-wrapper" style="padding-top: 0px; padding-bottom: 0px;">...</div>
  updatePaddingSet(paddingSet, list);
}

/**
 * 更新可视窗口列表的内容
 * @param {*} currentData 当前数据
 * @param {*} list 列表容器节点
 */
export function update(currentData, list) {
  //获取所有节点
  const oItems = list.querySelectorAll('.list-item');
  oItems.forEach((item, index) => {
    //更新可视窗口列表的内容为当前数据项
    item.innerText = currentData[index];
  });
}

/**
 * 根据paddingSet对象里的属性去更新视图padding样式
 * @param {*} paddingSet 对象
 * @param {*} list
 */
export function updatePaddingSet(paddingSet, list) {
  for (let k in paddingSet) {
    list.style[k] = paddingSet[k] + 'px';
  }
}
